<!--  -->
<template>
  <div>
    <!-- 图片上传，可传递参数有 files one disabled
      @param {String} v-mode - 展示图片数据
      @param {Boolean} one - 是否上传一张图片，默认false
      @param {Boolean} disabled - 是否为上传图片的展示（不理会是否存在one），默认false
      @return {String} success - 返回处理后的字符串逗号拼接路径
     -->
    <upload v-model="files" one @success="uploadSuccess" />

    <el-button @click="show=true">弹框展示</el-button>
    <!-- 内容弹框
      @param {Boolean} v-mode - 弹框是否展示
      @param {String} title - 头部信息，不填隐藏头部信息
      @param {Boolean} footer - 是否展示fotter，默认true
      @param {Boolean} clickModal - 是否点击遮罩层关闭，默认true
      @param {String} sureText - 确认按钮文字
      @param {String} cancelText - 取消按钮文字,为空时隐藏按钮<cancelText="">
      @param {Function} sureFn - 确认按钮函数
     -->
    <content-dialog v-model="show" :sureFn="submit">
      <div style="width:800px">
        <div v-for="item in 200" :key="item">{{item}}</div>
      </div>
    </content-dialog>

    <!-- 搜索区域及内容
      搜索区域必须为form，并且添加inline属性，slot="header"具名插槽
     -->
    <card>
      <el-form inline slot="header" :model="listQuery">
        <el-form-item label="审批人：">
          <el-input v-model="listQuery.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域：">
          <el-select v-model="listQuery.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间：">
          <el-date-picker v-model="listQuery.value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </card>

    <!-- 日月年，搜索区域及内容
      引入组件TimeChange，组件为form表单，集成插槽
      card组件中添加slot="header"具名插槽
      绑定ref属性，通过this.$refs[ref_name].getTime()，获取时间
     -->
    <card>
      <time-change ref="time" slot="header">
        <el-form-item label="审批人：">
          <el-input v-model="listQuery.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域：">
          <el-select v-model="listQuery.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </time-change>
      <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </card>

    <!-- 富文本编辑器 -->
    {{content}}
    <card>
      <tinymce v-model="content" />
    </card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import Upload from '@/components/Upload'
import ContentDialog from '@/components/ContentDialog'
import Card from '@/components/Card'
import TimeChange from '@/components/TimeChange'
import Tinymce from '@/components/Tinymce'

export default {
  name: '',
  components: {
    Pagination,
    Upload,
    ContentDialog,
    Card,
    TimeChange,
    Tinymce
  },
  data() {
    return {
      total: 50,
      listQuery: {
        page: 1,
        limit: 10,
      },

      files: '',
      show: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],

      content: '',
    };
  },
  computed: {},
  watch: {},
  mounted() {
    setTimeout(() => {
      this.files = 'http://img.ldjwl.com/images/20210308/c0930b14d46744e1abf1c79207c46dc0.jpg'
    }, 1000)
  },
  methods: {
    getList() {

    },
    uploadSuccess(data) {
      log(data, this.files)
    },
    /**
     * @param {Function} cb - 回调函数，当请求完成后执行cb(msg, type)
     * @param {String} msg - 弹框关闭后的提示信息，可不传
     * @param {type} cancelText - 提示信息类型，可选值 info, success, warning, error, 默认info
     */
    submit(cb) {
      setTimeout(() => {
        cb('请求完成', 'success')
      }, 5000)
    },
    search() {
      log(this.$refs.time.getTime())
    }
  },
}
</script>
<style lang='scss' scoped>
</style>